<template>
  <view class="container">
    <!-- Car rental section -->
    <view class="rental-section">
	  <view class="rentCarCity">
		  <view> 取还车城市</view>
		  <view class="detailaddresswrap">
			  <view class="detailaddressCity" @click="pickCity">{{ city }}</view>
			  <view class="detailaddress">平安区平安农商银行</view>
		  </view>
	  </view>
	  <view class="rentCarTimewrap">
		  <view class="starttimewrap">
		    <view class=" ">02月22日</view>
			<view class=" ">周三 10:00</view>
		  </view>
		  <view class="timeinterval">租2天</view>
		  <view class="endtimewrap">
			  <view class=" ">02月24日</view>
			  <view class=" ">周五 10:00</view>
		  </view>		  
	  </view>
      <button class="returnCat" @click="selectCar">去选车</button>
    </view>

    <!-- 猜你喜欢 -->
    <view class="f-header m-t">
      <image src="/static/temp/h1.png"></image>
      <view class="tit-box">
        <text class="tit">车辆列表</text>
      </view>
    </view>
    <view class="guess-section">
      <view
        v-for="(item, index) in goodsList"
        :key="index"
        class="guess-item"
        @click="navToDetailPage(item)"
      >
        <view class="image-wrapper">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <text class="title clamp">{{ item.title }}</text>
        <text class="price">￥{{ item.price }}</text>
      </view>
    </view>

  </view>
</template>


<script>
	export default {
	

		data() {
			return {
				city: '请选择城市',
				startDate: '',
				endDate: '',
				startTime: '',
				endTime: '',
				rentalDays: 0,
				datetimeRange: [],
				goodsList: [], // 示例数据，可以根据实际情况填写
				provinceCityData: {
				'北京': ['北京市'],
				'天津': ['天津市'],
				'上海': ['上海市'],
				'重庆': ['重庆市'],
				'河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
				'山西省': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
				'内蒙古自治区': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
				'辽宁省': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],
				'吉林省': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'],
				'黑龙江省': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'],
				'江苏省': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
				'浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
				'安徽省': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '巢湖市', '六安市', '亳州市', '池州市', '宣城市'],
				'福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
				'江西省': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
				'山东省': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'],
				'河南省': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'],
				'湖北省': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄樊市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州'],
				'湖南省': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'],
				'广东省': ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'],
				'广西壮族自治区': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
				'海南省': ['海口市', '三亚市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
				'四川省': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
				'贵州省': ['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁地区', '毕节地区', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
				'云南省': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'],
				'西藏自治区': ['拉萨市', '昌都市', '山南市', '日喀则市', '那曲市', '阿里地区', '林芝市'],
				'陕西省': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
				'甘肃省': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'],
				'青海省': ['西宁市', '海东市', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
				'宁夏回族自治区': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
				'新疆维吾尔自治区': ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区'],
				'香港特别行政区': ['香港岛', '九龙', '新界'],
				'澳门特别行政区': ['澳门半岛', '离岛'],
				'台湾省': ['台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市', '新北市', '宜兰县', '桃园县', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '台东县', '花莲县', '澎湖县']
			}
			};
		},

		onLoad() {
			this.loadData();
		},
	methods: {
      async loadData() {
        let carouselList = await this.$api.json('carouselList');
        this.titleNViewBackground = carouselList[0].background;
        this.swiperLength = carouselList.length;
        this.carouselList = carouselList;
        
        let goodsList = await this.$api.json('goodsList');
        this.goodsList = goodsList || [];
      },

      //轮播图切换修改背景色
      swiperChange(e) {
        const index = e.detail.current;
        this.swiperCurrent = index;
        this.titleNViewBackground = this.carouselList[index].background;
      },

      //详情页
      navToDetailPage(item) {
        let id = item.title;
        uni.navigateTo({
          url: `/pages/product/product?id=${id}`
        })
      },

      selectCar() {
        uni.navigateTo({
          url: '/pages/category/category'  // Adjust the URL to your car selection page
        });
      },

      pickCity() {
        const provinces = Object.keys(this.provinceCityData);
        uni.showActionSheet({
          itemList: provinces,
          success: (res) => {
            const selectedProvince = provinces[res.tapIndex];
            const cities = this.provinceCityData[selectedProvince];
            uni.showActionSheet({
              itemList: cities,
              success: (res) => {
                this.city = cities[res.tapIndex];
              },
              fail: () => {
                uni.showToast({ title: '选择城市失败', icon: 'none' });
              }
            });
          },
          fail: () => {
            uni.showToast({ title: '选择省份失败', icon: 'none' });
          }
        });
      },
	  calculateDays(event) {
		  const startDate = new Date(event.detail.startDate);
		  console.log(startDate)
		  const endDate = new Date(event.detail.endDate);
		  console.log(endDate)
		  const timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
		  const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
		  console.log(daysDiff)
		  
		  this.rentalDays = daysDiff;
	},



      calculateRentalDays(e) {
        const start = new Date(`${this.startDate} ${this.startTime}`);
        const end = new Date(`${this.endDate} ${this.endTime}`);
        const diffTime = Math.abs(end - start);
        this.rentalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      },

      onNavigationBarSearchInputClicked(e) {
        this.$api.msg('点击了搜索框');
      },

      onNavigationBarButtonTap(e) {
        const index = e.index;
        if (index === 0) {
          this.$api.msg('点击了扫描');
        } else if (index === 1) {
          // #ifdef APP-PLUS
          const pages = getCurrentPages();
          const page = pages[pages.length - 1];
          const currentWebview = page.$getAppWebview();
          currentWebview.hideTitleNViewButtonRedDot({
            index
          });
          // #endif
        }
      }
    }
  }
</script>

<style lang="scss" >
	.container {
		padding: 20px;
	}
	
	.rental-section {
		background: #fff;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 16px;
		.rentCarCity{
			.detailaddresswrap{
				display: flex;
				align-items: center;
				.detailaddressCity{
					width: 30%;
				}
				.detailaddress{
					width: 70%;
				}
			}
			
		}
		.rentCarTimewrap{
			display:flex;
			height: 50px;
			.starttimewrap{
				width: 35%;
			}
			.timeinterval{
				width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.endtimewrap{
				direction: rtl;
				width: 35%;
			}
			
		}
		.returnCat{
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.location, .bank, .duration {
		margin-bottom: 8px;
		font-size: 18px;
	}
	
	.dates {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	
	.date {
		flex: 1;
		text-align: center;
		cursor: pointer;
	}
	
	.separator {
		width: 10%;
		text-align: center;
	}
	
	button {
		background-color: #3b99fc;
		color: white;
		padding: 10px;
		border: none;
		border-radius: 5px;
		text-align: center;
		width: 100%;
	}
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	
	
	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}


	
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}


	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
	

</style>
